import React from "react";

import { Collapse ,Alert,List,Input ,Select,message,  Spin} from 'antd';

import InfiniteScroll from 'react-infinite-scroller';

import { ajax ,isNull,isEmpty,loadListData} from '../../common';

import UIIcon from '../../uicomponents/UIIcon';

import { getUIList } from '../../uiConfig';

const Option = Select.Option;


/**
 * 选择产品UI组件
 */
export default class ChooseProductUIComponentPanel extends React.Component {

    state = {
        uiDoaminList : [],
        data : [],
        loading: false,
        hasMore: true,
    }

    actionHandler = (actionEvent) => {
        return {};
    }

    componentDidMount(){
        this.domianId = this.props.defaultDomianId;
        this.getData(this.domianId,this.search, 1,(res) => {
            this.setState({
              data: res,
            });
          });
        const list = getUIList('product.productUIDoaminList');

        loadListData(list.type, list.dataProperty, list.labelProperty, list.iconProperty, isEmpty(list.script) === false ? eval('(' + list.script + ')') : null).then( (items) => {
            const uiDoaminList = items.map((item) => <Option key={item.id} value={parseInt(item.id)}>{item.icon !== undefined ? <UIIcon icon={item.icon} /> : []} {item.text}</Option>);
            this.setState({uiDoaminList : uiDoaminList});
        } );
    }

    getData = (domainId,search,page,callback) => {
        const {uiCompoment} = this.props;

        const params = this.getUIComponentParams(uiCompoment);
        const queryParams = {
            domainId : domainId,
            offset : (page -1) * 5 ,
            current : page,
            limit : 5
        };

        queryParams[params.code] = search,

        ajax(params.dataUrl,queryParams,(data) => {
            callback(data);
        });
      }

    handleInfiniteOnLoad = (page) => {
        this.page = page;
        let data = this.state.data;
        this.setState({
          loading: true,
        });
        if (data.total == data.records.length) {
          message.warning('没有更多数据');
          this.setState({
            hasMore: false,
            loading: false,
          });
          return;
        }
        this.getData(this.domianId,this.search, page,(res) => {
          const recoreds = data.records.concat(res.records);
          data.records = recoreds;
          this.setState({
            data,
            loading: false,
          });
        });
      }

    getUIComponentParams = (uiCompoment) => {
        if('UIActionGroup' === uiCompoment){

            return {
                dataUrl : 'PRODUCT/UI/productUIActionGroup/query',
                name : 'actionGroupCode',
                code : 'actionGroupCode',
                icon : 'cogs',
            }
        }
        else if('UIList' === uiCompoment){
            return {
                dataUrl : 'PRODUCT/UI/productUIList/query',
                name : 'code',
                code : 'name',
                icon : 'list',
            }
        }
        else if('UIForm' === uiCompoment){
            return {
                dataUrl : 'PRODUCT/UI/productUIForm/query',
                name : 'title',
                code : 'code',
                icon : 'list-alt',
            }
        }
        else if('UITable' === uiCompoment){
            return {
                dataUrl : 'PRODUCT/UI/productUITable/query',
                name : 'code',
                code : 'code',
                icon : 'table',
            }
        }
        else if('UITree' === uiCompoment){
            return {
                dataUrl : 'PRODUCT/UI/productUITree/query',
                name : 'code',
                code : 'name',
                icon : 'tree',
            }
        }
        else if('UITab' === uiCompoment){
            return {
                dataUrl : 'PRODUCT/UI/productUITab/query',
                name : 'code',
                code : 'code',
                icon : 'tags',
            }
        }
        else if('UIPage' === uiCompoment){
            return {
                dataUrl : 'PRODUCT/UI/productUIPage/query',
                name : 'pageCode',
                code : 'pageName',
                icon : 'window-maximize',
            }
        }

    }

    onUIDomainChange = (value, option) => {
        console.log(value);
        this.domianId = isNull(value) ? 0 : value;
        this.getData(this.domianId,this.search, 1,(data) => {
            this.setState({
                data,
              loading: false,
            });
          });
    }

    onSearchChange = (e) => {
        const { value } = e.target;
        this.search = value;
        this.getData(this.domianId,this.search, 1,(data) => {
            this.setState({
                data,
              loading: false,
            });
          });
    }

    handleChoose = (uiCom) => {
        const {uiCompoment} = this.props;
        const params = this.getUIComponentParams(uiCompoment);
        if(this.props.onChooseUIComponent){
            this.props.onChooseUIComponent({id : uiCom.id,value : uiCom[params.code]});
        }

    }

    render(){

        const {uiCompoment} = this.props;

        const {uiDoaminList} = this.state;

        const params = this.getUIComponentParams(uiCompoment);
        
        const uiDomainList = (
            <Select
                defaultValue={this.props.defaultDomianId}
                allowClear={true}
                getPopupContainer={trigger => trigger.parentNode}
                style={{ width: 120 }}
                onChange={this.onUIDomainChange}
            >
            {
				uiDoaminList
			}
            </Select>
        );

        return(
            <div>
                <div>
                    <Input addonAfter={uiDomainList} onChange={this.onSearchChange}/>
                </div>
                <div className="data-infinite-container">
                <InfiniteScroll
                    initialLoad={false}
                    pageStart={0}
                    loadMore={this.handleInfiniteOnLoad}
                    hasMore={!this.state.loading && this.state.hasMore}
                    useWindow={false}
                >
                    <List
                        size="small"
                        dataSource={this.state.data.records}
                        renderItem={uiComponent => (
                            <List.Item key={uiComponent.id}>
                                <List.Item.Meta
                                        title={<span><UIIcon icon={params.icon} /><a onClick={(e) => { this.handleChoose( uiComponent)}}>{uiComponent[params.name]}</a></span>}
                                        description={uiComponent[params.code]}
                                >
                                </List.Item.Meta>
                                <div>{uiComponent.domainName }</div>
                            </List.Item>
                        )}
                    >
                        {this.state.loading && this.state.hasMore && (
                        <div className="data-loading-container">
                            <Spin />
                        </div>
                        )}
                    </List>
                    </InfiniteScroll>
                </div>
            </div>
        );
    }
}